<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web编程技术课程设计</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        :root {
            --primary: #3498db;
            --secondary: #2c3e50;
            --accent: #e74c3c;
            --light: #ecf0f1;
            --dark: #34495e;
            --success: #2ecc71;
            --warning: #f39c12;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: var(--dark);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 导航栏样式 */
        nav {
            background: linear-gradient(to right, var(--secondary), var(--primary));
            color: white;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: bold;
            font-size: 1.5rem;
        }

        .logo i {
            font-size: 1.8rem;
            color: var(--accent);
        }

        .nav-links {
            display: flex;
            gap: 1.5rem;
        }

        .nav-links a {
            color: white;
            text-decoration: none;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .nav-links a:hover, .nav-links a.active {
            background: rgba(255, 255, 255, 0.2);
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .user-info span {
            font-weight: 500;
        }

        .btn {
            padding: 0.6rem 1.2rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background-color: var(--primary);
            color: white;
        }

        .btn-primary:hover {
            background-color: #2980b9;
        }

        .btn-accent {
            background-color: var(--accent);
            color: white;
        }

        .btn-accent:hover {
            background-color: #c0392b;
        }

        .btn-outline {
            background: transparent;
            border: 1px solid white;
            color: white;
        }

        .btn-outline:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        /* 主内容区域 */
        main {
            flex: 1;
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }

        .page {
            display: none;
            animation: fadeIn 0.5s ease;
        }

        .page.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 首页样式 */
        .hero {
            text-align: center;
            padding: 4rem 2rem;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            margin-bottom: 3rem;
        }

        .hero h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: var(--secondary);
        }

        .hero p {
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0 auto 2rem;
            color: var(--dark);
            line-height: 1.6;
        }

        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .feature-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-10px);
        }

        .feature-img {
            height: 180px;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 3rem;
        }

        .feature-content {
            padding: 1.5rem;
        }

        .feature-content h3 {
            color: var(--secondary);
            margin-bottom: 0.8rem;
        }

        /* 内容展示页 */
        .content-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .content-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }

        .content-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
        }

        .card-img {
            height: 200px;
            background: linear-gradient(45deg, #3498db, #2c3e50);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2.5rem;
        }

        .card-body {
            padding: 1.5rem;
        }

        .card-body h3 {
            margin-bottom: 0.8rem;
            color: var(--secondary);
        }

        .card-body p {
            color: #555;
            line-height: 1.6;
        }

        /* 表单样式 */
        .form-container {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
            max-width: 600px;
            margin: 2rem auto;
        }

        .form-title {
            text-align: center;
            margin-bottom: 1.5rem;
            color: var(--secondary);
        }

        .form-group {
            margin-bottom: 1.2rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--dark);
        }

        .form-control {
            width: 100%;
            padding: 0.8rem 1rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
            transition: border 0.3s ease;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }

        .error-message {
            color: var(--accent);
            font-size: 0.85rem;
            margin-top: 0.3rem;
            display: none;
        }

        /* 表格样式 */
        .table-container {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
            margin: 2rem 0;
            overflow-x: auto;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
        }

        .data-table th {
            background-color: var(--primary);
            color: white;
            text-align: left;
            padding: 1rem;
            cursor: pointer;
            position: relative;
        }

        .data-table th:hover {
            background-color: #2980b9;
        }

        .data-table th::after {
            content: '↕';
            position: absolute;
            right: 10px;
        }

        .data-table td {
            padding: 0.8rem 1rem;
            border-bottom: 1px solid #eee;
        }

        .data-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .data-table tr:hover {
            background-color: #f1f1f1;
        }

        /* 图表容器 */
        .chart-container {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
            margin: 2rem 0;
        }

        .chart-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
            gap: 2rem;
            margin-top: 1rem;
        }

        .chart-box {
            height: 400px;
            border-radius: 8px;
            background: white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        /* 页脚样式 */
        footer {
            background: var(--secondary);
            color: white;
            padding: 2rem;
            text-align: center;
            margin-top: 3rem;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }

        .footer-links {
            display: flex;
            gap: 1.5rem;
            margin: 1rem 0;
        }

        .footer-links a {
            color: #bbb;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-links a:hover {
            color: white;
        }

        .back-to-top {
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: fixed;
            bottom: 20px;
            right: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 99;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .back-to-top.visible {
            opacity: 1;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            nav {
                flex-direction: column;
                gap: 1rem;
            }
            
            .nav-links {
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .hero {
                padding: 2rem 1rem;
            }
            
            .chart-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav>
        <div class="logo">
            <i>📊</i>
            <span>Web技术课程设计</span>
        </div>
        <div class="nav-links">
            <a href="#" class="nav-link active" data-page="home-page">首页</a>
            <a href="#" class="nav-link" data-page="content-page">内容展示</a>
            <a href="#" class="nav-link" data-page="form-page">数据提交</a>
            <a href="#" class="nav-link" data-page="chart-page">数据可视化</a>
            <a href="#" class="nav-link" data-page="login-page">用户管理</a>
        </div>
        <div class="user-info">
            <span id="username-display">游客</span>
            <button id="logout-btn" class="btn btn-outline" style="display: none;">退出登录</button>
        </div>
    </nav>

    <!-- 主内容区域 -->
    <main>
        <!-- 首页 -->
        <section id="home-page" class="page active">
            <div class="hero">
                <h1>Web编程技术课程设计项目</h1>
                <p>本系统整合了HTML5、CSS3、JavaScript及Plotly数据可视化技术，实现了用户管理、内容展示、数据提交与可视化分析等核心功能。</p>
                <div class="features">
                    <div class="feature-card">
                        <div class="feature-img">👤</div>
                        <div class="feature-content">
                            <h3>用户管理系统</h3>
                            <p>实现用户注册、登录、退出功能，使用localStorage安全存储用户信息。</p>
                        </div>
                    </div>
                    <div class="feature-card">
                        <div class="feature-img">📚</div>
                        <div class="feature-content">
                            <h3>内容展示模块</h3>
                            <p>以卡片形式展示图文内容，支持响应式布局，适配各种设备屏幕。</p>
                        </div>
                    </div>
                    <div class="feature-card">
                        <div class="feature-img">📈</div>
                        <div class="feature-content">
                            <h3>数据可视化</h3>
                            <p>使用Plotly.js实现折线图、饼图、3D散点图等高级数据可视化效果。</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 内容展示页 -->
        <section id="content-page" class="page">
            <h2 class="form-title">技术内容展示</h2>
            <div class="content-grid">
                <div class="content-card">
                    <div class="card-img">HTML5</div>
                    <div class="card-body">
                        <h3>HTML5 新特性</h3>
                        <p>HTML5引入了语义化标签、多媒体支持、Canvas绘图、本地存储等强大功能，极大地丰富了Web应用的能力。</p>
                    </div>
                </div>
                <div class="content-card">
                    <div class="card-img">CSS3</div>
                    <div class="card-body">
                        <h3>CSS3 动画与布局</h3>
                        <p>CSS3提供了Flexbox、Grid布局系统，以及过渡、变形和动画功能，使Web界面更加美观和动态。</p>
                    </div>
                </div>
                <div class="content-card">
                    <div class="card-img">JS</div>
                    <div class="card-body">
                        <h3>JavaScript ES6+</h3>
                        <p>现代JavaScript引入了类、模块、箭头函数、解构赋值等特性，大大提高了开发效率和代码可读性。</p>
                    </div>
                </div>
                <div class="content-card">
                    <div class="card-img">📊</div>
                    <div class="card-body">
                        <h3>数据可视化</h3>
                        <p>Plotly.js是一个开源的JavaScript图表库，支持创建交互式、响应式的统计图表、3D图表和地图可视化。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 表单提交页 -->
        <section id="form-page" class="page">
            <div class="form-container">
                <h2 class="form-title">用户信息提交</h2>
                <form id="user-form">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" id="name" class="form-control" placeholder="请输入您的姓名" required>
                        <div class="error-message" id="name-error">请输入2-20个字符的姓名</div>
                    </div>
                    <div class="form-group">
                        <label for="age">年龄</label>
                        <input type="number" id="age" class="form-control" placeholder="请输入您的年龄" min="1" max="120" required>
                        <div class="error-message" id="age-error">请输入有效的年龄(1-120)</div>
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="email" id="email" class="form-control" placeholder="请输入您的邮箱" required>
                        <div class="error-message" id="email-error">请输入有效的邮箱地址</div>
                    </div>
                    <div class="form-group">
                        <label for="interest">兴趣领域</label>
                        <select id="interest" class="form-control" required>
                            <option value="">请选择您的兴趣领域</option>
                            <option value="前端开发">前端开发</option>
                            <option value="后端开发">后端开发</option>
                            <option value="数据分析">数据分析</option>
                            <option value="人工智能">人工智能</option>
                            <option value="产品设计">产品设计</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary" style="width: 100%; padding: 0.9rem; margin-top: 1rem;">提交信息</button>
                </form>
            </div>

            <div class="table-container">
                <h2 class="form-title">用户数据表格</h2>
                <div id="table-container">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th data-sort="id">ID</th>
                                <th data-sort="name">姓名</th>
                                <th data-sort="age">年龄</th>
                                <th data-sort="gender">性别</th>
                                <th data-sort="category">类别</th>
                                <th data-sort="score1">分数1</th>
                                <th data-sort="score2">分数2</th>
                                <th data-sort="score3">分数3</th>
                                <th data-sort="timestamp">时间</th>
                            </tr>
                        </thead>
                        <tbody id="table-body">
                            <!-- 表格数据将通过JS动态生成 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <!-- 数据可视化页 -->
        <section id="chart-page" class="page">
            <div class="chart-container">
                <h2 class="form-title">数据可视化展示</h2>
                <div class="chart-grid">
                    <div id="line-chart" class="chart-box"></div>
                    <div id="pie-chart" class="chart-box"></div>
                    <div id="scatter-chart" class="chart-box"></div>
                </div>
            </div>
        </section>

        <!-- 用户管理页 -->
        <section id="login-page" class="page">
            <div class="form-container">
                <div id="login-section">
                    <h2 class="form-title">用户登录</h2>
                    <form id="login-form">
                        <div class="form-group">
                            <label for="login-email">邮箱</label>
                            <input type="email" id="login-email" class="form-control" placeholder="请输入您的邮箱" required>
                        </div>
                        <div class="form-group">
                            <label for="login-password">密码</label>
                            <input type="password" id="login-password" class="form-control" placeholder="请输入您的密码" required>
                        </div>
                        <button type="submit" class="btn btn-primary" style="width: 100%; padding: 0.9rem; margin-top: 1rem;">登录</button>
                        <p style="text-align: center; margin-top: 1rem;">
                            还没有账号？<a href="#" id="show-register">立即注册</a>
                        </p>
                    </form>
                </div>

                <div id="register-section" style="display: none;">
                    <h2 class="form-title">用户注册</h2>
                    <form id="register-form">
                        <div class="form-group">
                            <label for="reg-username">用户名</label>
                            <input type="text" id="reg-username" class="form-control" placeholder="请输入用户名" required>
                        </div>
                        <div class="form-group">
                            <label for="reg-email">邮箱</label>
                            <input type="email" id="reg-email" class="form-control" placeholder="请输入您的邮箱" required>
                        </div>
                        <div class="form-group">
                            <label for="reg-password">密码</label>
                            <input type="password" id="reg-password" class="form-control" placeholder="请设置密码（至少6位）" required>
                        </div>
                        <div class="form-group">
                            <label for="reg-confirm">确认密码</label>
                            <input type="password" id="reg-confirm" class="form-control" placeholder="请再次输入密码" required>
                        </div>
                        <button type="submit" class="btn btn-accent" style="width: 100%; padding: 0.9rem; margin-top: 1rem;">注册</button>
                        <p style="text-align: center; margin-top: 1rem;">
                            已有账号？<a href="#" id="show-login">立即登录</a>
                        </p>
                    </form>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer>
        <div class="footer-content">
            <div class="logo">
                <i>📊</i>
                <span>Web编程技术课程设计</span>
            </div>
            <div class="footer-links">
                <a href="#">关于我们</a>
                <a href="#">联系方式</a>
                <a href="#">隐私政策</a>
                <a href="#">使用条款</a>
            </div>
            <p>© 2024 Web编程技术课程设计 | 邮箱：contact@webtech.edu</p>
            <p>本系统使用HTML5、CSS3、JavaScript和Plotly.js构建</p>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button class="back-to-top">↑</button>

    <script>
        // 模拟的CSV数据
        const csvData = [
            {id: 1, name: 'Alice', age: 22, gender: 'F', category: '产品设计', score1: 78, score2: 85, score3: 92, timestamp: '2024-06-01'},
            {id: 2, name: 'Bob', age: 24, gender: 'M', category: '前端开发', score1: 88, score2: 76, score3: 81, timestamp: '2024-06-01'},
            {id: 3, name: 'Charlie', age: 23, gender: 'M', category: '数据分析', score1: 90, score2: 89, score3: 87, timestamp: '2024-06-02'},
            {id: 4, name: 'Diana', age: 25, gender: 'F', category: '前端开发', score1: 82, score2: 91, score3: 84, timestamp: '2024-06-02'},
            {id: 5, name: 'Eric', age: 21, gender: 'M', category: '产品设计', score1: 76, score2: 80, score3: 79, timestamp: '2024-06-03'},
            {id: 6, name: 'Fiona', age: 22, gender: 'F', category: '数据分析', score1: 85, score2: 88, score3: 86, timestamp: '2024-06-03'},
            {id: 7, name: 'George', age: 24, gender: 'M', category: '前端开发', score1: 93, score2: 90, score3: 91, timestamp: '2024-06-04'},
            {id: 8, name: 'Helen', age: 23, gender: 'F', category: '产品设计', score1: 72, score2: 70, score3: 75, timestamp: '2024-06-04'},
            {id: 9, name: 'Ian', age: 25, gender: 'M', category: '数据分析', score1: 87, score2: 85, score3: 90, timestamp: '2024-06-05'},
            {id: 10, name: 'Judy', age: 22, gender: 'F', category: '前端开发', score1: 95, score2: 92, score3: 94, timestamp: '2024-06-05'}
        ];

        // 当前用户状态
        let currentUser = JSON.parse(localStorage.getItem('currentUser')) || null;

        // DOM 加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化页面
            initNavigation();
            initForms();
            renderUserTable();
            updateUserDisplay();
            initCharts();
            initScrollToTop();
        });

        // 初始化导航
        function initNavigation() {
            const navLinks = document.querySelectorAll('.nav-link');
            navLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 更新活动链接
                    navLinks.forEach(l => l.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 显示对应页面
                    const pageId = this.getAttribute('data-page');
                    showPage(pageId);
                });
            });

            // 退出登录按钮
            document.getElementById('logout-btn').addEventListener('click', logout);
        }

        // 显示指定页面
        function showPage(pageId) {
            // 隐藏所有页面
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            
            // 显示目标页面
            document.getElementById(pageId).classList.add('active');
            
            // 滚动到顶部
            window.scrollTo(0, 0);
            
            // 如果是图表页，重新渲染图表（确保尺寸正确）
            if (pageId === 'chart-page') {
                setTimeout(initCharts, 100);
            }
        }

        // 初始化表单
        function initForms() {
            // 用户信息表单
            document.getElementById('user-form').addEventListener('submit', function(e) {
                e.preventDefault();
                if (validateUserForm()) {
                    alert('用户信息提交成功！');
                    this.reset();
                }
            });

            // 登录表单
            document.getElementById('login-form').addEventListener('submit', function(e) {
                e.preventDefault();
                login();
            });

            // 注册表单
            document.getElementById('register-form').addEventListener('submit', function(e) {
                e.preventDefault();
                register();
            });

            // 显示注册/登录切换
            document.getElementById('show-register').addEventListener('click', function(e) {
                e.preventDefault();
                document.getElementById('login-section').style.display = 'none';
                document.getElementById('register-section').style.display = 'block';
            });

            document.getElementById('show-login').addEventListener('click', function(e) {
                e.preventDefault();
                document.getElementById('register-section').style.display = 'none';
                document.getElementById('login-section').style.display = 'block';
            });

            // 表单验证
            document.getElementById('name').addEventListener('input', validateName);
            document.getElementById('age').addEventListener('input', validateAge);
            document.getElementById('email').addEventListener('input', validateEmail);
        }

        // 用户表单验证
        function validateUserForm() {
            return validateName() & validateAge() & validateEmail();
        }

        function validateName() {
            const name = document.getElementById('name').value;
            const error = document.getElementById('name-error');
            if (name.length < 2 || name.length > 20) {
                error.style.display = 'block';
                return false;
            }
            error.style.display = 'none';
            return true;
        }

        function validateAge() {
            const age = parseInt(document.getElementById('age').value);
            const error = document.getElementById('age-error');
            if (isNaN(age) || age < 1 || age > 120) {
                error.style.display = 'block';
                return false;
            }
            error.style.display = 'none';
            return true;
        }

        function validateEmail() {
            const email = document.getElementById('email').value;
            const error = document.getElementById('email-error');
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                error.style.display = 'block';
                return false;
            }
            error.style.display = 'none';
            return true;
        }

        // 用户登录
        function login() {
            const email = document.getElementById('login-email').value;
            const password = document.getElementById('login-password').value;
            
            // 简单验证
            if (!email || !password) {
                alert('请输入邮箱和密码');
                return;
            }
            
            // 模拟登录成功
            currentUser = {
                username: email.split('@')[0],
                email: email
            };
            
            // 保存到localStorage
            localStorage.setItem('currentUser', JSON.stringify(currentUser));
            
            // 更新UI
            updateUserDisplay();
            
            // 显示成功消息
            alert('登录成功！');
            
            // 返回首页
            document.querySelectorAll('.nav-link')[0].click();
        }

        // 用户注册
        function register() {
            const username = document.getElementById('reg-username').value;
            const email = document.getElementById('reg-email').value;
            const password = document.getElementById('reg-password').value;
            const confirm = document.getElementById('reg-confirm').value;
            
            // 简单验证
            if (!username || !email || !password) {
                alert('请填写所有字段');
                return;
            }
            
            if (password !== confirm) {
                alert('两次输入的密码不一致');
                return;
            }
            
            if (password.length < 6) {
                alert('密码长度至少为6位');
                return;
            }
            
            // 模拟注册成功
            currentUser = {
                username: username,
                email: email
            };
            
            // 保存到localStorage
            localStorage.setItem('currentUser', JSON.stringify(currentUser));
            
            // 更新UI
            updateUserDisplay();
            
            // 显示成功消息
            alert('注册成功！已自动登录');
            
            // 返回首页
            document.querySelectorAll('.nav-link')[0].click();
            
            // 重置表单
            document.getElementById('register-form').reset();
        }

        // 退出登录
        function logout() {
            currentUser = null;
            localStorage.removeItem('currentUser');
            updateUserDisplay();
            alert('已退出登录');
        }

        // 更新用户显示状态
        function updateUserDisplay() {
            const usernameDisplay = document.getElementById('username-display');
            const logoutBtn = document.getElementById('logout-btn');
            
            if (currentUser) {
                usernameDisplay.textContent = currentUser.username;
                logoutBtn.style.display = 'block';
            } else {
                usernameDisplay.textContent = '游客';
                logoutBtn.style.display = 'none';
            }
        }

        // 渲染用户表格
        function renderUserTable() {
            const tableBody = document.getElementById('table-body');
            tableBody.innerHTML = '';
            
            csvData.forEach(user => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${user.id}</td>
                    <td>${user.name}</td>
                    <td>${user.age}</td>
                    <td>${user.gender}</td>
                    <td>${user.category}</td>
                    <td>${user.score1}</td>
                    <td>${user.score2}</td>
                    <td>${user.score3}</td>
                    <td>${user.timestamp}</td>
                `;
                tableBody.appendChild(row);
            });
            
            // 添加表格排序功能
            document.querySelectorAll('.data-table th[data-sort]').forEach(header => {
                header.addEventListener('click', function() {
                    const sortKey = this.getAttribute('data-sort');
                    sortTable(sortKey);
                });
            });
        }

        // 表格排序
        function sortTable(key) {
            csvData.sort((a, b) => {
                if (a[key] < b[key]) return -1;
                if (a[key] > b[key]) return 1;
                return 0;
            });
            renderUserTable();
        }

        // 初始化图表
        function initCharts() {
            // 折线图
            const lineTrace = {
                x: csvData.map(d => d.id),
                y: csvData.map(d => d.score1),
                type: 'scatter',
                mode: 'lines+markers',
                name: 'Score1',
                line: {color: '#3498db', width: 3},
                marker: {size: 8}
            };
            
            const lineLayout = {
                title: 'Score1 随 ID 变化趋势',
                xaxis: {title: '用户ID'},
                yaxis: {title: '分数'},
                hovermode: 'closest'
            };
            
            Plotly.newPlot('line-chart', [lineTrace], lineLayout);
            
            // 饼图
            const categoryCounts = {};
            csvData.forEach(user => {
                categoryCounts[user.category] = (categoryCounts[user.category] || 0) + 1;
            });
            
            const pieTrace = {
                values: Object.values(categoryCounts),
                labels: Object.keys(categoryCounts),
                type: 'pie',
                hole: 0.4,
                marker: {
                    colors: ['#3498db', '#2ecc71', '#e74c3c', '#f39c12', '#9b59b6']
                }
            };
            
            const pieLayout = {
                title: '用户类别分布',
                showlegend: true
            };
            
            Plotly.newPlot('pie-chart', [pieTrace], pieLayout);
            
            // 3D散点图
            const scatterTrace = {
                x: csvData.map(d => d.score1),
                y: csvData.map(d => d.score2),
                z: csvData.map(d => d.score3),
                mode: 'markers',
                type: 'scatter3d',
                marker: {
                    size: 8,
                    color: csvData.map(d => d.id),
                    colorscale: 'Viridis',
                    opacity: 0.8
                },
                text: csvData.map(d => d.name)
            };
            
            const scatterLayout = {
                title: '三维能力坐标分布',
                scene: {
                    xaxis: {title: 'Score1'},
                    yaxis: {title: 'Score2'},
                    zaxis: {title: 'Score3'}
                },
                margin: {l: 0, r: 0, b: 0, t: 30}
            };
            
            Plotly.newPlot('scatter-chart', [scatterTrace], scatterLayout);
        }

        // 初始化返回顶部按钮
        function initScrollToTop() {
            const backToTopBtn = document.querySelector('.back-to-top');
            
            window.addEventListener('scroll', function() {
                if (window.pageYOffset > 300) {
                    backToTopBtn.classList.add('visible');
                } else {
                    backToTopBtn.classList.remove('visible');
                }
            });
            
            backToTopBtn.addEventListener('click', function() {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
        }
    </script>
</body>
</html>